import NavBar from "../components/commons/navbar/NavBar.tsx";
import TableHeader from "../components/cart/TableHeader.tsx";
import TableFooter from "../components/cart/TableFooter.tsx";
import NoItemsMessage from "../components/cart/NoItemsMessage.tsx";
import CartElement from "../components/cart/CartElement.tsx";
import CartSidebar from "../components/cart/CartSidebar.tsx";

import "../styles/modules/cart.css"
import {useEffect, useState} from "react";
import {baseUrl} from "../settings/Settings.ts";


const CartPage = () => {

    const [cart, setCart] = useState<CartItem[]>([])

    const fetchData = async () => {
        try {
            const response = await fetch(`${baseUrl}/api/cart/get`, {
                method: 'GET',
                headers: {
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Headers': 'Content-Type, Accept, Origin, X-Requested-With',
                    'Content-Type': 'application/json'
                },
                credentials: 'include'
            });
            const data = await response.json();

            if (response.ok) {

                setCart(data.cart)
                console.log(data)
            }

        } catch (error) {
            console.error('Error fetching data')
        }
    }
    //to set cart
    useEffect(() => {


        fetchData();
    }, []);


    const updateCart = () => {

        fetchData();
    }



    return (


        <>
            <NavBar/>
            <main className="d-flex flex-nowrap cart-main overflow-y-hidden">

                <div className="container m-0 p-0 overflow-y-scroll" id="container-main">


                    <div className="row justify-content-between align-items-center header-container"
                         id="cart-container-header">
                        <h1 className="headline-large text-center" id="h1-header">Your Cart</h1>
                        <div className="col-auto w-100 text-center">
                    <span className="badge p-4 ps-4 pe-4 me-3 rounded-pill"
                          id="badge-counter">{cart.length}</span>
                        </div>
                    </div>

                    <div className="row mt-0 m-1 mb-2 row-cols-1 row-cols-sm-2 row-cols-md-4 g-3 card-row">

                        <div className="col w-100 mt-0">


                            <div className="container mt-0 p-0 mb-5" id="container-items-list">
                                <TableHeader/>


                                {cart.length === 0 && (
                                    <NoItemsMessage/>
                                ) || (
                                    cart.map((item) => (
                                        <CartElement updateCart={updateCart} item={item}/>
                                    ))
                                )}


                                <TableFooter/>


                            </div>


                        </div>
                    </div>
                </div>
                <CartSidebar/>
            </main>


        </>
    )
}

export default CartPage